<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="app">
        
        <input type="text" v-model="username">
        <ul>
            <li v-for="(item, index) in students" :key="index">{{item}}</li>
        </ul>
        <!-- <test></test> -->
        <test2></test2>
    </div>

    <div id="app2">
        <!-- <test></test> -->
        <test2></test2>
    </div>


    <template id="test_component">
        <div>
            <h1>test组件{{age}}</h1>
        </div>
    </template>
    
    <script>
        // 定义全局组件
        Vue.component('test',{
            template:'#test_component',
            data:function(){
                return {
                    age:18
                }
            }
        })

        var app2 = new Vue({
            el:'#app2',
            components: {
                // 定义局部组件
                'test2':{
                    template:`<div id="divFather">
                                <h1>test2组件{{age}}</h1>
                                <test2son num="19" name="张三" 
                                    v-on:getSonMsg="getSonMsg"></test2son>
                                <p>sonMsg:{{sonMsg}}</p>
                            </div>`,
                    data:function(){
                        return {
                            age:18,
                            sonMsg:''
                        }
                    },
                    methods: {
                        getSonMsg:function(data){
                            this.sonMsg=data;
                        }
                    },
                    components:{
                        'test2son':{
                            template:`<div id="divSon"> 
                                        <p>我是test2son {{num}}--{{name}}</p>
                                     <button @click="sendMsg">给父组件传值</button>
                                </div>`,
                            props:['num','name'],
                            data:function(){
                                return {
                                    sonMsg:'子组件的信息'
                                }
                            },
                            methods:{
                                sendMsg:function(){
                                    console.log('sendMsg');
                                    // 给父组件传值，触发一个事件
                                    this.$emit('getSonMsg',this.sonMsg)
                                }
                            }
                        }
                    }
                }
            }
        })

        var app = new Vue({
            el: '#app',
            data: function(){
                return {
                    username:'张三',
                    students:['阿福','阿鑫','阿维']
                }
            }
                ,
            beforeCreate() {
              // 钩子函数
              // 生命周期函数  创建之前,特征：拿不到 data里的数据
            //   debugger
              console.log('beforeCreate:this',this);
              console.log('beforeCreate:this.username',this.username);  
              console.log(document.getElementById('app')); 
            },
            created() {
              // 生命周期函数  创建之后,特征：有data，没有$el属性
            //   debugger

            //   this.students = $.get();

              console.log('created:this',this);
              console.log('created:this.username',this.username); 
              console.log('created:this.$el',this.$el); 
              console.log(document.getElementById('app')); 

            },
            beforeMount() {
              // 已经有了虚拟DOM
              // 生命周期函数  挂载之前,特征：有$el属性,虚拟DOM没有渲染到页面
              console.log('beforeMount:this',this);
              console.log('beforeMount:this.username',this.username); 
              console.log('beforeMount:this.$el',this.$el); 
              console.log(document.getElementById('app')); 
              //   debugger
            },
            mounted() {
              // 生命周期函数  挂载之后,特征：虚拟DOM渲染到页面
              console.log('mounted:this',this);
              console.log('mounted:this.username',this.username); 
              console.log('mounted:this.$el',this.$el); 
              console.log(document.getElementById('app')); 
                // debugger
            },

            beforeUpdate() {
                // 生命周期函数  更新之前,特征：改Model，用JS改this.username，改后的值没有渲染到页面
                console.log('beforeUpdate:this.username',this.username); 
                // debugger
            },
            updated() {
                // 生命周期函数  更新之后,特征：改Model，用JS改this.username，改后的值渲染到页面
                console.log('updated:this.username',this.username); 
                // debugger
            },
            beforeDestroy() {
                // debugger
                console.log('beforeDestroy:this',this);
                console.log('beforeDestroy:this.username',this.username); 
            },
            destroyed() {
                debugger
                console.log('destroyed:this',this);
                console.log('destroyed:this.username',this.username); 
            },
        })
    </script>
</body>
</html>